import React, { PureComponent } from 'react'
import { Button, Select } from 'antd'
import { connect } from 'react-redux'
import { history } from '@/index'
import SearchForm from '@/Public/PubTable/searchForm'
import BaseTable from '@/Public/PubTable/baseTable'
import WrappedTable from '@/Public/PubTable/WrappedTable'
import { userTableConfig } from '@/Public/PubTable/pageColumns'
import { userManagement } from '@/Utils/Urls'
import { selectedData } from '@/Redux/ActionTypes/public/BaseTable/publicActionCreator'

const { Option } = Select;

const markName = 'userTable'
const mapStateToProps = (state) => ({
})

const mapDispatchToProps = (dispatch) => ({
  setSelectedData(...rest) {
    return dispatch(selectedData(...rest))
  }
})
@connect(mapStateToProps, mapDispatchToProps)
class UserTable extends PureComponent {
  state = {
    selectedNodeMsg: {},    // 选中的树节点的信息
    remove: 0,
    typeId: 0
  }

  searchFormConfig = {
    formItems: [{
      type: 'Input',
      label: '学生姓名',
      name: 'studentName',
      style: {
        display: 'none'
      },
    }, {
      type: 'Input',
      label: '年级',
      name: 'grade',
      style: {
        display: 'none'
      },
    }, {
      type: 'Input',
      label: '家长姓名',
      name: 'parentName',
      style: {
        display: 'none'
      },
    }, {
      type: 'Input',
      label: '联系方式',
      name: 'telephone',
      style: {
        display: 'none'
      },
    }, {
      type: 'Extra',
      name: 'orderBy',
      label: '排序方式',
      render: saerchFormRef => {
        return (
          <Select initialvalues="1" style={{ width: 120 }}>
            <Option value="1">时间</Option>
            <Option value="2">家长姓名</Option>
            <Option value="3">年级</Option>
          </Select>
        )
      }
    },
    ],
    ajaxConfig: {
      url: userManagement.queryAllStudent,
      data: {
        orderBy: 1,
      },
      ajaxType: 'post',
    }
  }

  changeTableData(res) {
    return {
      data: res.list,
      pageSize: 10,
      current: res.pageInfo.page,
      total: res.totalCount
    }
  }

  changeSearchLimit = data => {
    const { selectedNodeMsg } = this.state;
    // 如果点击根节点或初始状态则获取全部（不传部门id）
    if (JSON.stringify(selectedNodeMsg) !== '{}' && selectedNodeMsg['id'] !== -1) {
      data['id'] = selectedNodeMsg['id']
    }
    return data;
  }

  operationButton = (record) => {
    return <Button onClick={() => this.getUserDetails(record)}>查看</Button>
  }

  getUserDetails = (record) => {
    const { setSelectedData } = this.props
    setSelectedData(record)
    history.push('/homePage/userManagement/users/userDetails')
  }

  render() {
    return (
      <WrappedTable>
        <SearchForm
          formItems={this.searchFormConfig}
          changeSearchLimit={this.changeSearchLimit}
          changeTableData={this.changeTableData}
          markName={markName}
        ></SearchForm>
        <BaseTable
          markName={markName}
          withPreview={false}
          tableConfig={userTableConfig} // 表格表头设置
          changeTableData={this.changeTableData} // 把拿到的表格数据改造成符合公共组件所需数据的格式
          changeSearchLimit={this.changeSearchLimit}
          stylePointer={true}
          onRowEvent={true}
          operationButton={record => this.operationButton(record)}
        ></BaseTable>
      </WrappedTable>
    )
  }
}

export default UserTable
